<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-07-10 10:36:02
 * @LastEditTime: 2022-09-26 08:50:51
 * @FilePath: \ypcmsvue3\src\pages\rule\index.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
    <div class="w-full bg-white p-2 rounded space-y-5">
        <div class="flex items-center">
            <div class="flex items-center">
                <i class="ri-menu-line ri-lg text-hui-300 ml-2"></i>
                <div class="text-lg px-2">系统菜单</div>
            </div>
            <div class="flex-1"></div>
            <button class="btn btn-lan" type="button" @click="add">
                增加菜单
            </button>
        </div>

        <div class="text-sm">
            <div class="flex border-b bg-hui-50 leading-8 font-bold">
                <div class="text-center md:w-20 border-r w-8">ID</div>
                <div class="flex-1 px-2">菜单名称</div>
                <div class="md:w-32 pl-2 hidden md:block">类型</div>
                <div class="md:w-32 pl-2 hidden md:block text-center">图标</div>
                <div class="md:w-32 pl-2 hidden md:block text-center">排序</div>
                <div class="md:w-32 pl-2 hidden md:block text-center">状态</div>
                <div class="w-32 text-center">操作</div>
            </div>
            <template v-for="(item, index) in dataList">
                <ruleChild v-if="item.children && item.children.length > 0" :item="item" :key="index" :basePath="item.id" :leave="0" />
                <ruleItem v-else :item="item" :key="index + 1" :leave="0" />
            </template>
        </div>
    </div>
    <ypdialog width="800" :title="ypdialogTitle" :mask="1" v-if="VisibleDialog" @close="VisibleDialog = false">
        <Form :id="ruleId"></Form>
    </ypdialog>
</template>

<script setup>
import store from '@/store'
import { getData, postData, alter, confirms } from '@/common/base'
import { onMounted, ref, reactive, provide } from 'vue'
import Form from './form.vue'
import ruleChild from './ruleChild'
import ruleItem from './ruleItem'
const dataList = ref('')
const ypdialogTitle = ref('增加菜单')
const VisibleDialog = ref(false)
const ruleId = ref(0)
const openedRules = reactive({ path: [] })
const add = async () => {
    ruleId.value = 0
    ypdialogTitle.value = '增加菜单'
    VisibleDialog.value = true
}
const edit = (id) => {
    ruleId.value = id
    ypdialogTitle.value = '编辑菜单'
    VisibleDialog.value = true
}
const getList = async () => {
    const resp = await getData('rule')
    if (resp.code == 1) {
        dataList.value = resp.data
    }
}
provide('setcom', {
    item: {},
    openedRules: openedRules,
    edit: (id) => {
        edit(id)
    },
    destory: (id) => {
        confirms({ text: '确认删除吗？' })
            .then(async () => {
                const resp = await postData('rule/delete', { id: id })
                if (resp.code == 1) {
                    alter({ type: 'alter-success', text: resp.msg })
                    getList()
                }
            })
            .catch((e) => { })
    },
    update: async () => {
        await getList()
    },
    clickSubMenu: (basePath) => {
        if (openedRules.path.indexOf(basePath)>=0) {
            openedRules.path.splice(openedRules.path.indexOf(basePath), 1)
        } else {
            openedRules.path.push(basePath)
        }
        sessionStorage.setItem('openRules', JSON.stringify(openedRules.path))
    }
})

onMounted(async () => {
    if (sessionStorage.getItem('openRules')) {
        openedRules.path = JSON.parse(sessionStorage.getItem('openRules'))
    }
    getList()
})
</script>

